<template>
	<view style="width: 100%; height: 100%;">
		<view class="pd-xxl" style="width: 100%; height: 50%;">
			<MyTable :columns="columns" :rows="rows" :headerStyle="headerStyle" :bodyStyle="bodyStyle"></MyTable>
		</view>
		<view class="pd-xxl" style="width: 100%; height: 200px">
			<MyTable :columns="columns" :rows="rows" :headerStyle="headerStyle2" :bodyStyle="bodyStyle2" class="radius3"></MyTable>
		</view>
		<view class="pd-xxl" style="width: 100%; height: 200px">
			<MyTable :columns="columns" :rows="rows"class="radius1"></MyTable>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				columns: [
					{name: "column1", width: '200rpx'}, 
					{name: "column2", width: '200rpx'},
					{name: "column3", width: '200rpx'},
					{name: "column4", width: '200rpx'},
					{name: "column5", width: '200rpx'},
					{name: "column6", width: '200rpx'},
					{name: "column7", width: '200rpx'},
					{name: "column8", width: '200rpx'},
				],
				rows: [],
				
				headerStyle: {
					'height': '100rpx',
					'background-color': '#FF0000',
				},
				bodyStyle: {
					'background-color': '#0000FF',
				},
				
				headerStyle2: {
					'height': '70rpx',
					'background-color': '#FFF',
					'border-bottom': '1px solid #f8f8f8',
					'font-weight': 'bold'
				},
				bodyStyle2: {
					'background-color': '#FFF',
				}
			}
		},
		onLoad() {
			this.rows = [];
			for(let i = 0; i < 100; i++) {
				let row = [];
				for(let j = 0; j < this.columns.length; j++) {
					row.push((i+1)+'-'+(j+1));
				}
				this.rows.push(row)
			}
			
			setTimeout(()=>{
				this.columns.push({
					name: "column9", width: '200rpx'
				});
				this.columns.push({
					name: "column10", width: '200rpx'
				});
				
				for(let i = 0; i < 100; i++) {
					let row = [];
					for(let j = 0; j < this.columns.length; j++) {
						row.push((i+1)+'-'+(j+1));
					}
					this.rows.push(row)
				}
			}, 5000);
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100vh;
		width: 100vw;
	}
	@import "@/leui.scss";
	
</style>
